<template>
  <div
    :id="id"
    :style="{
      width: width,
      height: height
    }"
    v-echart-resize
  ></div>
</template>

<script setup>
import { defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { unwarp } from '@/utils/commUtils'
// v-echart-resize
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  datas: {
    type: Array,
    default: () => []
  }
})
const chart = ref(null)
const setOptions = (sourceData) => {
  const xDatas = []
  const yDatas = []
  if (sourceData.length > 0) {
    sourceData.forEach((ele) => {
      xDatas.push(ele.minitorTime)
      yDatas.push(ele.data)
    })
  }

  const option = {
    // backgroundColor: '#1427BC',
    tooltip: { trigger: 'axis' },
    grid: {
      top: '18%',
      left: '10%',
      right: '10%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: '#01BDF4B5'
          }
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: '#38CCF7',
            margin: 15
          }
        },
        axisTick: { show: false },
        data: xDatas
      }
    ],
    yAxis: [
      {
        name: '浓度',
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#01BDF44d'
          }
        },
        axisLine: { show: true, lineStyle: { color: '#01BDF4', width: 2 } },
        axisLabel: {
          margin: 20,
          textStyle: {
            color: '#BABABA'
          }
        },
        axisTick: { show: false }
      },
      {
        name: '',
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#01BDF44d'
          }
        },
        axisLine: { show: true, lineStyle: { color: '#01BDF4', width: 2 } },
        axisLabel: {
          margin: 20,
          textStyle: {
            color: '#BABABA'
          }
        },
        axisTick: { show: false }
      }
    ],
    series: [
      {
        name: '浓度',
        type: 'line',
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,

        lineStyle: {
          normal: {
            color: 'transparent' // 线条颜色
          }
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                { offset: 0, color: 'rgba(27, 140, 255, 1)' },
                { offset: 0.7, color: 'rgba(1, 189, 244, 0.29)' }
              ],
              false
            )
          }
        },
        data: yDatas
      }
    ]
  }
  unwarp(chart.value).setOption(option)
}

const initChart = () => {
  setTimeout(() => {
    if (!chart.value) {
      chart.value = echarts.init(document.getElementById(props.id))
      /*  window.onresize = function () {
        chart.value.resize()
      } */
    }
    setOptions(props.datas)
  }, 0)
}

//huicai-map echart屏幕适配失效，在此重写
const echartResize = () => {
  const div = document.getElementById(props.id)
  if (div) {
    const chart = echarts.getInstanceByDom(div)
    if (chart) {
      chart.resize()
    }
  }
}
const bindEchart = () => {
  window.addEventListener('resize', echartResize)
}
const unbindEchart = () => {
  window.removeEventListener('resize', echartResize)
}

onMounted(() => {
  initChart()
  bindEchart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
  unbindEchart()
})
watch(
  () => props.datas,
  () => {
    setOptions(props.datas)
  }
)
</script>

<style lang="scss" scoped></style>
